<template>
    <div style="width: 100%;">
      <table style="background-color: transparent;width: 100%;height: 100%" v-if="arr.length > 0">
        <tbody>
          <tr v-for="n in arrLength">
            <td v-for="index in 5" style="padding: 10px;width: 20%;height: 120px">
                <el-row v-if="arr[(n-1)*5+(index-1)]"  :style="{borderRadius:'5px',color:'gray'}"
                        style="text-align: center;height: 100%;cursor: pointer;border: 1px #ebebeb solid;" >
                  <div style="font-size: 14px;color: black;display: table;table-layout: fixed;width: 100%;margin-top: 5px">
                    <div style="display: table-cell;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">
                      <a :href="arr[(n-1)*5+(index-1)].url" target="_blank"> {{arr[(n-1)*5+(index-1)].name}}</a>
                    </div>
                  </div>
                </el-row>
            </td>

          </tr>

        </tbody>
      </table>
    </div>

</template>

<script>
  import { mapGetters } from 'vuex'
    export default {
        name: "Index",
        data(){
          return{

          }
        },
      methods:{
        color:function (item) {
          if(item.own)
          {
            return "#17b9e6"
          }
          else
          {
            if(item.role==0)
            {
              return "#17b9e6"
            }
            else
            {
              return "#67C23A";
            }
          }
        }
      },
      computed:{
        arr(){
          return  this.navigateDate
        },
        arrLength:function () {
          var val=this.arr.length/5;
          return Math.floor(val)===val?val:(Math.floor(val)+1)
        },
        ...mapGetters([
          'navigateDate'
        ])

      },

    }
</script>

<style scoped>
  .el-row::after, .el-row::before {
    display: none;
  }
</style>
